<template>
	<view class="page">
		<nav-bar title="办理会员卡" bgColor="#FFF" titleColor="#000"></nav-bar>
		<view class="card">
			<card-item :cardItem="cardDetail" :showRenew="false" :stores="false"></card-item>
			<scroll-view scroll-y="true" :style="{height:mainHeight+'px'}">
				<view class="detail-list">
					<li v-for="(item, index) in cardConfig" :key="index">
						<view class="list-item">
							<view class="img"></view>
							<view class="title">{{ item.label }}</view>
						</view>
						<view v-if="item.key" class="content">
							{{ (cardDetail[item.key] || '暂无') }}
						</view>
						<view class="price-item" v-else>
							￥<text class="price">{{ cardDetail.price }}</text>/{{ cardDetail.days }}天
							<text class="day-num">日均价<text
									class="day-price">￥{{ (cardDetail.price / cardDetail.days).toFixed(2) }}/天</text></text>
						</view>
					</li>
					<view class="" style="height: 75px;"></view>
				</view>
			</scroll-view>
		</view>
		<view class="button">
			<view class="button-item" @click="clickBuy">
				购买
			</view>
		</view>
		<you-popup :popupVisible="popupVisible" popupTitle="会员卡购买" popupType="bottom" dialogWidth="100%"
			:showBtn="false" @popupClose="popupVisible = false">
			<view slot="popupContent" class="card-content">
				<view class="list">
					<view class="point">
						会员卡剩余天数：<span style="font-size: 36rpx;">{{ goBuy.validDays }}</span>天
					</view>
					<view class="list-item-title">
						<view class="item-left">
						</view>
						<view class="item-right">
							费用明细
						</view>
					</view>
					<view class="price">
						<view class="price-left">
							会员卡金额
						</view>
						<view class="price-right">
							￥{{ goBuy.price }}
						</view>
					</view>
					<view class="price" v-if="goBuy.dayDiscountPrice">
						<view class="price-left">
							卡可抵扣价
						</view>
						<view class="price-right">
							￥{{ goBuy.dayDiscountPrice }}
						</view>
					</view>
					<view class="sum">
						总计 ￥<span class="num">{{ getTotal(goBuy.price,goBuy.dayDiscountPrice) }}</span>
					</view>
					<view class="protocol">
						购买则视为同意<span class="protocol-item">《会员卡服务协议》</span>
					</view>
					<view class="pay-btn" v-if="loading" @click="clickSureBuy">
						购买
					</view>
					<view class="pay-btn" v-else>
						购买中
					</view>
				</view>
			</view>
		</you-popup>
	</view>
</template>

<script>
	import NavBar from '@/components/nav-bar'
	import YouPopup from '@/components/you-popup2'
	import CardItem from './components/cardItem'
	import api_membership from '@/api/membership'
	export default {
		components: {
			NavBar,
			YouPopup,
			CardItem
		},
		data() {
			return {
				ruleId: '',
				loading: true,
				cardId: null,
				storeId: '',
				cardDetail: {},
				popupVisible: false,
				mainHeight: '',
				cardConfig: [{
						label: '适用门店',
						key: 'storeName'
					},
					{
						label: '购买价格',
						key: '',
						endSlot: '元'
					},
					{
						label: '会员卡天数',
						key: 'days',
						endSlot: '天'
					},
					// {
					// 	label: '日均价',
					// 	key: 'dayAveragePrice',
					// 	endSlot: '元'
					// },
					{
						label: '原会员卡抵扣金额',
						key: 'dayDiscountPrice',
						endSlot: '元'
					},
					{
						label: '赠送优惠券名称',
						key: 'couponNames'
					},
					{
						label: '赠送优惠券数量',
						key: 'giftNumber'
					},
					{
						label: '购买时间',
						key: 'createTime'
					},
					{
						label: '规则说明',
						key: 'remark'
					}
				],
				data: {},
				goBuy: {},
				isHaveCard: false,
				storeId: ''
			}
		},
		onLoad(options) {
			this.ruleId = options.id
			this.storeId = options.storeId
			// if (options.cardId) {
			// 	this.isHaveCard = true
			// 	this.cardId = options.cardId
			// 	this.data = JSON.parse(decodeURIComponent(options.data));
			// 	console.log(this.data, 'this.data ');
			// }
			this.storeId = options.storeId
			this.getCardTypeDetail()
			this.mainHeight = this.$store.getters.heightData.mainHeight.split('px')[0] - 250
		},
		onUnload() {
			this.isHaveCard = false
			this.goBuy = {}
		},
		methods: {
			getTotal(num1, num2) {
				const num = parseFloat(num1 - num2).toFixed(2)
				if (num <= 0) {
					return 0.01
				} else {
					return num
				}
			},
			getCardTypeDetail() {
				let params = {
					storeId: this.storeId,
					id: this.ruleId
				}
				api_membership.appletInfo(params).then(res => {
					if (res.code !== 200) return
					this.cardDetail = res.data
					// if (this.isHaveCard) {
					// 	this.cardDetail.validDays = this.data.validDays
					// 	this.goBuy = {
					// 		validDays: this.data.validDays,
					// 		price: this.cardDetail.price,
					// 		totalPrice: this.getTotalPrice(
					// 			this.cardDetail.price,
					// 			this.data.validDays,
					// 			this.cardDetail.days
					// 		),
					// 		deductionPrice: this.getDeductionPrice(
					// 			this.cardDetail.price,
					// 			this.data.validDays,
					// 			this.cardDetail.days),
					// 	}
					// } else {
					this.cardDetail.validDays = this.cardDetail.days
					this.goBuy = {
						validDays: this.cardDetail.days,
						price: this.cardDetail.price,
						deductionPrice: null,
						dayDiscountPrice: this.cardDetail.dayDiscountPrice
					}
					// }
				})
			},
			getDeductionPrice(num1, num2, num3) {
				return parseFloat(Number(num1) * Number(num2) / Number(num3)).toFixed(2)
			},
			getTotalPrice(num1, num2, num3) {
				return parseFloat(Number(num1) - (Number(num1) * Number(num2) / Number(num3))).toFixed(2)
			},
			clickBuy() {
				this.popupVisible = true
			},
			clickSureBuy() {
				let that = this
				const params = {
					ruleId: this.ruleId,
					storeId: this.storeId
				}
				api_membership.buyCard(params).then(res => {
					if (res.code !== 200) return
					this.loading = false
					const payParams = res.data.data
					const resParams = {
						timeStamp: payParams.timestamp,
						nonceStr: payParams.nonceStr,
						package: payParams.package,
						signType: payParams.signType,
						paySign: payParams.paySign
					}
					console.log(resParams);
					// 测试另一个支付
					// const amount = this.getTotal(this.goBuy.price, this.goBuy.dayDiscountPrice)
					// const resParams1 = {
					// 	"terminalCode": payParams.terminalCode,
					// 	"amount":amount,
					// 	"nonceStr": payParams.nonceStr,
					// 	"sign": payParams.paySign
					// }
					// console.log(resParams1, 'resParams1');
					// const plugin = requirePlugin('test-plugin')
					// plugin.pay({
					// 	data: {
					// 		"terminalCode": payParams.terminalCode,
					// 		"amount":amount,
					// 		"nonceStr": payParams.nonceStr,
					// 		"sign": payParams.paySign
					// 	},
					// 	success: (res) => {
					// 		console.log(res, 'res')
					// 	},
					// 	fail: (err) => {
					// 		console.log(err, 'err')
					// 	}
					// })
					// return

					// 调用微信小程序的支付接口
					uni.requestPayment({
						...resParams,
						success(res) {
							uni.showToast({
								title: '充值成功',
								icon: 'none'
							})
							this.popupVisible = false
							this.loading = true
							// 支付成功的回调
							that.$tab.navigateTo('/subPages/membership/membershipSuccess')
						},
						fail(res) {
							this.popupVisible = false
							// 支付失败的回调
							console.log('支付失败', res)
							that.cancelPayment()
						}
					})
				})
			},

			// 取消支付函数
			cancelPayment() {
				uni.showToast({
					title: '支付已取消',
					icon: 'none',
					duration: 2000
				})
				this.popupVisible = false
				this.loading = true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		.button {
			position: fixed;
			width: 100%;
			bottom: 0;
			height: 148rpx;
			opacity: 1;
			background: #FFFFFF;
			box-shadow: 0rpx -2rpx 13rpx #ADADAD;
			display: flex;
			justify-content: center;
			align-items: center;

			.button-item {
				width: 671rpx;
				height: 94rpx;
				background: linear-gradient(90deg, #EDD3AE 0%, #DCB17F 100%);
				border-radius: 63rpx 63rpx 63rpx 63rpx;
				opacity: 1;
				text-align: center;
				font-size: 30rpx;
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 500;
				line-height: 94rpx;
			}
		}

		.list {
			padding: 32rpx;

			.point {
				color: #FE4D4F;
			}

			.list-item-title {
				margin-top: 40rpx;
				display: flex;

				.item-left {
					width: 12rpx;
					height: 38rpx;
					background-color: #9D8254
				}

				.item-right {
					margin-left: 50rpx;
					font-size: 34rpx;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 500;
				}
			}

			.price {
				display: flex;
				justify-content: space-between;
				line-height: 72rpx;

				.price-left {
					font-size: 30rpx;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 500;
					margin-left: 62rpx;
				}

				.price-right {
					font-size: 32rpx;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					margin-right: 46rpx;
				}
			}

			.sum {
				text-align: right;
				margin-right: 56rpx;
				margin-top: 32rpx;
				font-size: 30rpx;
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 500;

				.num {
					color: #FE4D4F;
					font-size: 40rpx;
					font-family: DIN, DIN;
					font-weight: bold;
				}
			}

			.protocol {
				width: 603rpx;
				// margin-top: ;
				margin: 36rpx auto;
				text-align: center;

				.protocol-item {
					color: #C27E15;
				}
			}

			.pay-btn {
				width: 671rpx;
				height: 94rpx;
				margin: 0 auto;
				background: linear-gradient(90deg, #EDD3AE 0%, #DCB17F 100%);
				border-radius: 63rpx 63rpx 63rpx 63rpx;
				opacity: 1;
				text-align: center;
				line-height: 94rpx;
				font-size: 30rpx;
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 500;
			}
		}

		.card {
			padding: 0 36rpx;

			.card-title {
				font-size: 36rpx;
				font-weight: 600;
				font-family: Source Han Sans CN, Source Han Sans CN;
			}

			.detail-list {
				padding: 12rpx 2rpx 0;

				li {
					padding: 16rpx;

					.list-item {
						display: flex;

						.img {
							width: 20rpx;
							height: 20rpx;
							border: 5rpx solid #C27E15;
							border-radius: 16rpx;
							margin-top: 10rpx;
						}

						.title {
							margin-left: 20rpx;
							font-size: 30rpx;
							font-weight: 500;
						}
					}

					.content,
					.price-item {
						margin-left: 30rpx;
						line-height: 38rpx;
						padding: 16rpx;
					}

					.price-item {
						color: #fe4d4f;

						.price {
							margin-right: 4rpx;
							font-size: 34rpx;
							font-weight: bold;
						}

						.day-num {
							margin-left: 40rpx;
							font-size: 22rpx;

							.day-price {
								margin-left: 4rpx;
							}
						}
					}
				}
			}
		}
	}
</style>